<template>
  <div>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue.name"
      ref="saveTagInput"
      size="medium"
      effect="plain"
      placeholder="输入内容"
    >

      <template slot="append">
        <el-tooltip class="item" effect="dark" content="添加咨询类别" placement="top-start">
          <el-button icon="el-icon-circle-plus" class="addConsult" @click="drawer = true"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="添加专家类型图标" placement="top-start">
          <el-upload
            ref="upload"
            list-type="picture"
            accept=".jpg"
            :action="'#'"
            :auto-upload="false"
            :show-file-list="false"
            :file-list="fileList"
            :on-change="getFileTypeIcon"
            :before-remove="()=>false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <el-button v-else icon="el-icon-upload"></el-button>
          </el-upload>
        </el-tooltip>
        <el-button @click="handleInputConfirm">确认</el-button>
      </template>

    </el-input>
    <el-button v-else class="button-new-tag" size="medium" @click="showInput"
      >+ {{ label }}</el-button>

    <!-- 添加咨询类别的抽屉 -->
    
      <Comdrawer size="60%" title="添加咨询类别" :drawer="drawer" @eventColse="drawerClose">
        <div class="consultDrawer">
          <el-form ref="ruleForm" :model="inputValue.consultType" :rules="rules"  label-position="top">
            <el-form-item label="类别名称" prop="name">
              <el-input v-model="inputValue.consultType.name" ></el-input>
            </el-form-item>
            <el-form-item label="类别类型" prop="type">
              <el-radio-group v-model="inputValue.consultType.type">
                <el-radio label="1">一级类别</el-radio>
                <el-radio label="2">二级类别</el-radio>
                <el-radio label="3">三级类别</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="inputValue.consultType.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">停止</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="类别限额" prop="quota">
              <el-input v-model="inputValue.consultType.quota"></el-input>
            </el-form-item>

            <el-form-item label="PC端的图标" class="consultIcon">
              <el-form-item prop="icon1base64">
                未选中的图标：
                <el-upload
                  ref="upload"
                  list-type="picture"
                  accept=".jpg"
                  :action="'#'"
                  :auto-upload="false"
                  :show-file-list="false"
                  :file-list="fileList"
                  :on-change="getFileIcon1"
                  :before-remove="()=>false"
                >
                  <img v-if="icon1" :src="icon1" class="avatar">
                  <el-button v-else icon="el-icon-upload"></el-button>
                </el-upload>
              </el-form-item>
              <el-form-item prop="icon2base64">
                &nbsp;&nbsp;&nbsp;选中的图标：
                <el-upload
                  ref="upload"
                  list-type="picture"
                  accept=".jpg"
                  :action="'#'"
                  :auto-upload="false"
                  :show-file-list="false"
                  :file-list="fileList"
                  :on-change="getFileIcon2"
                  :before-remove="()=>false"
                >
                  <img v-if="icon2" :src="icon2" class="avatar">
                  <el-button v-else icon="el-icon-upload"></el-button>
                </el-upload>
              </el-form-item>
            </el-form-item>

            <el-form-item label="移动端的图标" class="consultIcon">
              <el-form-item prop="mIcon1base64">
                未选中的图标：
                <el-upload
                  ref="upload"
                  list-type="picture"
                  accept=".jpg"
                  :action="'#'"
                  :auto-upload="false"
                  :show-file-list="false"
                  :file-list="fileList"
                  :on-change="getFileMIcon1"
                  :before-remove="()=>false"
                >
                  <img v-if="mIcon1" :src="mIcon1" class="avatar">
                  <el-button v-else icon="el-icon-upload"></el-button>
                </el-upload>
              </el-form-item>
              <el-form-item prop="mIcon2base64">
                &nbsp;&nbsp;&nbsp;选中的图标：
                <el-upload
                  ref="upload"
                  list-type="picture"
                  accept=".jpg"
                  :action="'#'"
                  :auto-upload="false"
                  :show-file-list="false"
                  :file-list="fileList"
                  :on-change="getFileMIcon2"
                  :before-remove="()=>false"
                >
                  <img v-if="mIcon2" :src="mIcon2" class="avatar">
                  <el-button v-else icon="el-icon-upload"></el-button>
                </el-upload>
              </el-form-item>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" class="drawerSubmit">确认</el-button>
              <el-button @click="resetForm('ruleForm')" class="drawerReset">取消</el-button>
            </el-form-item>

          </el-form>
        </div>
      </Comdrawer>
    
  </div>
</template>

<script>
import Comdrawer from "@/wss/components/Comdrawer.vue";
export default {
  components: { Comdrawer },
  props: {
    label: {
      type: String,
      default: "默认标题",
    },
  },
  data() {
    return {
      // 输入框的值
      // inputValue: "",
      
      //咨询类别的抽屉弹出
      drawer: false,

      //收集输入的数据
      inputValue:{
        pid:'',
        type:'',
        name:'',
        base64:'',
        format:'.jpg',
        consultType:{
          name:'',
          type:'',
          status:'',
          quota:'',
          icon1base64:'',
          icon1format:'.jpg',
          icon2base64:'',
          icon2format:'.jpg',
          mIcon1base64:'',
          mIcon1format:'.jpg',
          mIcon2base64:'',
          mIcon2format:'.jpg',
        },
      },
      //上传的图标
      imageUrl: '',

      //咨询类别的上传的图标
      icon1: '',
      icon2: '',
      mIcon1:'',
      mIcon2:'',

      //咨询类别表单验证
      rules:{
        name:[{ required: true, message: '请输入类别名称', trigger: 'blur' },],
        type:[{ required: true, message: '请选择类别类型', trigger: 'change' },],
        status:[{ required: true, message: '请选择状态', trigger: 'change' },],
        quota:[{ required: true, message: '请输入类别限额', trigger: 'blur' },],
        icon1base64:[{ required: true, message: '请上传图标', trigger: 'blur' },],
        icon2base64:[{ required: true, message: '请上传图标', trigger: 'blur' },],
        mIcon1base64:[{ required: true, message: '请上传图标', trigger: 'blur' },],
        mIcon2base64:[{ required: true, message: '请上传图标', trigger: 'blur' },],
      },

      fileList:[],

      // 控制显示输入框
      inputVisible: false,
    };
  },
  methods: {
    //   显示输入框
    showInput() {
      const _this = this;

      _this.inputVisible = true;
      _this.$nextTick((_) => {
        _this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    //添加咨询类别抽屉 显示隐藏
    drawerClose() {
      this.drawer = false;
    },
    //添加咨询类别抽屉 取消按钮
    resetForm(ruleForm){
      this.$refs.ruleForm.resetFields();
      this.drawer = false;
    },

    //添加咨询类别抽屉 确认按钮
    submitForm(ruleForm){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.drawer = false;
        } else {
          return false;
        }
      });
    },
    

    // 点击确认传递回父组件
    handleInputConfirm() {
      const _this = this;
      //判断咨询类别的属性是否有空值
      let consultType = _this.inputValue.consultType
      // console.log(consultType);
      let consultTypeStatus = true
      for(const key in consultType){
        if(!consultType[key]){
          consultTypeStatus = false
          this.$message.error('添加咨询类别!');
          return
        }
      }
      //判断是否填写了内容和图标
      if(!_this.inputValue.name && !_this.inputValue.base64){
        this.$message.error('请输入内容和上传图标!');
        return
      }else{
        _this.$emit("Event-blurInput", _this.inputValue);
        _this.inputVisible = false;
        _this.imageUrl=''
        _this.inputValue.name=''
      }
    },

    //专家类型通过getFile方法获取文件信息
    getFileTypeIcon(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }

      if (fileList&&fileList.length>1) {
        fileList.shift();
      }
      this.imageUrl=file.url
      this.getBase64(file.raw).then(res => {
          const params = res
          this.inputValue.base64 = params.split(',')[1]
          this.$message({
            type: "success",
            message: "上传成功!",
          });
      })
    },

    //PC端icon1通过getFile方法获取文件信息
    getFileIcon1(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }

      if (fileList&&fileList.length>1) {
        fileList.shift();
      }
      this.icon1=file.url
      this.getBase64(file.raw).then(res => {
          const params = res
          this.inputValue.consultType.icon1base64 = params.split(',')[1]
          this.$message({
            type: "success",
            message: "上传成功!",
          });
      })
    },
    //PC端icon2通过getFile方法获取文件信息
    getFileIcon2(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }

      if (fileList&&fileList.length>1) {
        fileList.shift();
      }
      this.icon2=file.url
      this.getBase64(file.raw).then(res => {
          const params = res
          this.inputValue.consultType.icon2base64 = params.split(',')[1]
          this.$message({
            type: "success",
            message: "上传成功!",
          });
      })
    },

    //移动端icon1通过getFile方法获取文件信息
    getFileMIcon1(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }

      if (fileList&&fileList.length>1) {
        fileList.shift();
      }
      this.mIcon1=file.url
      this.getBase64(file.raw).then(res => {
          const params = res
          this.inputValue.consultType.mIcon1base64 = params.split(',')[1]
          this.$message({
            type: "success",
            message: "上传成功!",
          });
      })
    },

    //移动端icon2通过getFile方法获取文件信息
    getFileMIcon2(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }

      if (fileList&&fileList.length>1) {
        fileList.shift();
      }
      this.mIcon2=file.url
      this.getBase64(file.raw).then(res => {
          const params = res
          this.inputValue.consultType.mIcon2base64 = params.split(',')[1]
          this.$message({
            type: "success",
            message: "上传成功!",
          });
      })
    },

    // 图片转base64编码：
    getBase64(file) {
      return new Promise(function (resolve, reject) {
          const reader = new FileReader()
          let imgResult = ''
          reader.readAsDataURL(file)
          reader.onload = function () {
              // console.log(reader.result,'reader.result')
              imgResult = reader.result
          }
          reader.onerror = function (error) {
              reject(error)
          }
          reader.onloadend = function () {
              resolve(imgResult)
          }
      })
    },

  },
};
</script>

<style lang="scss" scoped>
.input-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e6ebf5;
  display: flex;
}
::v-deep .input-new-tag .el-input__inner {
  width: 100%;
  border: 0;
  height: 47px;
  line-height: 47px;
  background-color: #f8f8f8;
}
::v-deep .input-new-tag .el-input-group__append{
  display: flex;
  align-items: center;
  width: auto;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #f8f8f8;
  background-color: #f8f8f8;
}
::v-deep .input-new-tag .el-input-group__append .addConsult{
  padding-top: 11px;
  padding-right: 0px;
  margin-right: 5px;
  font-size: 20px;
}
::v-deep .input-new-tag .el-input-group__append>div{
  margin-right: 25px;
}
::v-deep .input-new-tag .el-input-group__append>div .el-button{
  padding: 10px 0;
  margin: 0 5px;
}
::v-deep .input-new-tag .el-input-group__append .el-icon-upload{
  font-size: 20px;
}
::v-deep .input-new-tag .el-input-group__append>button{
  padding-left: 0;
}
.el-upload .avatar{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}

// 添加咨询类别
.consultDrawer{
  padding: 20px 30px;
}
.el-form{
  width: 80%;
}
::v-deep .el-form--label-top .el-form-item__label{
  padding-bottom: 0;
}
::v-deep .consultIcon .el-form-item__content{
  display: flex;
  align-items: center;
}

.drawerSubmit,
.drawerReset{
  font-size: 14px;
}
</style>